Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →

@uppy/dashboard

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@uppy/dashboard

Universal UI plugin for Uppy.

1.21.1
Source
npm

Version published: 3 years ago

Weekly downloads: 130K; decreased by-16.88%

Maintainers: 5

Weekly downloads

Created: 6 years ago

What is @uppy/dashboard?

@uppy/dashboard is a versatile file uploader UI plugin for Uppy, a modular file uploader for web applications. It provides a drag-and-drop interface, file previews, and progress indicators, making it easy to integrate file uploading capabilities into your web application.

What are @uppy/dashboard's main functionalities?

Drag-and-Drop File Upload

This feature allows users to drag and drop files into a designated area for uploading. The code sample demonstrates how to set up the Uppy Dashboard with drag-and-drop functionality.

const Uppy = require('@uppy/core');
const Dashboard = require('@uppy/dashboard');

const uppy = Uppy();
uppy.use(Dashboard, {
  target: '#drag-drop-area',
  inline: true
});

File Previews

This feature provides previews of the files that are being uploaded. The code sample shows how to configure the Uppy Dashboard to display file previews and upload progress details.

const Uppy = require('@uppy/core');
const Dashboard = require('@uppy/dashboard');

const uppy = Uppy();
uppy.use(Dashboard, {
  target: '#file-preview-area',
  inline: true,
  showLinkToFileUploadResult: true,
  showProgressDetails: true
});

Progress Indicators

This feature shows progress indicators for file uploads. The code sample demonstrates how to set up the Uppy Dashboard to display detailed progress indicators for each file being uploaded.

const Uppy = require('@uppy/core');
const Dashboard = require('@uppy/dashboard');

const uppy = Uppy();
uppy.use(Dashboard, {
  target: '#progress-indicator-area',
  inline: true,
  showProgressDetails: true
});

Other packages similar to @uppy/dashboard

@uppy/dashboard

Dashboard is a universal UI plugin for Uppy:

Drag and Drop, paste, select from local disk / my device
UI for Webcam and remote sources: Google Drive, Dropbox, Instagram (all optional, added via plugins)
File previews and info
Metadata editor
Progress: total and for individual files
Ability to pause/resume or cancel (depending on uploader plugin) individual or all files

Read the docs | Try it

Uppy is being developed by the folks at Transloadit, a versatile file encoding service.

Example

const Uppy = require('@uppy/core')
const Dashboard = require('@uppy/dashboard')

const uppy = new Uppy()
uppy.use(Dashboard, {
  target: 'body',
  inline: true
})

Installation

$ npm install @uppy/dashboard

We recommend installing from npm and then using a module bundler such as Webpack, Browserify or Rollup.js.

Alternatively, you can also use this plugin in a pre-built bundle from Transloadit's CDN: Edgly. In that case Uppy will attach itself to the global window.Uppy object. See the main Uppy documentation for instructions.

Documentation

Documentation for this plugin can be found on the Uppy website.

License

The MIT License.

Keywords

FAQs

What is @uppy/dashboard?

Is @uppy/dashboard popular?

Is @uppy/dashboard well maintained?

Package last updated on 19 Aug 2021

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install